package day20240904;

import jakarta.servlet.*;
import jakarta.servlet.annotation.WebServlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;

@WebServlet("/my-ajex")
public class Ajex_Demo implements Servlet {

    @Override
    public void init(ServletConfig servletConfig) throws ServletException {

    }

    @Override
    public ServletConfig getServletConfig() {
        return null;
    }

    @Override
    public void service(ServletRequest servletRequest, ServletResponse servletResponse) throws ServletException, IOException {
        Random r = new Random();
        int i = r.nextInt(10);
        PrintWriter printWriter = servletResponse.getWriter();
        printWriter.write("""
                <!DOCTYPE html>
                <html>
                                                
                <head>
                    <meta charset="UTF-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <title>AJAX Demo 1</title>
                    <style>
                        #myDiv {
                            margin-bottom: 1rem;
                        }
                    </style>
                </head>
                                                
                <body>
                <h2>AJAX Demo 1</h2>
                <div id="myDiv">
                    <p>当点击下方”修改内容“按钮，使用 AJAX 动态修改这里的内容</p>
                </div>
                <button type="button" onclick="loadDataFromServer()">修改内容</button>
                                                
                <script>
                    function loadDataFromServer() {
                        var xhr;
                        if (window.XMLHttpRequest) {
                            xhr = new XMLHttpRequest();
                        }
                        else {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        xhr.onreadystatechange = function () {
                            if (xhr.readyState == 4 && xhr.status == 200) {
                                document.getElementById("myDiv").innerHTML = xhr.responseText;
                            }
                        }
                        xhr = { 
                            key1: 'value1', 
                            key2: '
                            """
                +
                i
                +
                """
                                               ' 
                                                }; 
                                                 
                                                // 将数据转换为JSON字符串 
                                                var jsonData = JSON.stringify(data); 
                                                xhr.send(jsonData);
                                            }
                                        </script>
                                        </body>
                                        
                                        </html>
                        """);
    }

    @Override
    public String getServletInfo() {
        return null;
    }

    @Override
    public void destroy() {

    }
}
